<template>
    <div class="category-dialog">
        <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="45%" :modal-append-to-body="false" >
            <el-form :model="form">
                <el-form-item label="上级资源">
                    <el-input v-model="form.parentDisplay"  placeholder="请选择父级菜单"  @focus="openSelectDialog" :readOnly="true"></el-input>
                    <el-input v-model="form.parentId" type="hidden"></el-input>
                </el-form-item>

                <el-form-item label="菜单编号">
                    <el-input v-model="form.moduleId" auto-complete="off" ></el-input>
                </el-form-item>

                <el-form-item label="菜单名称" >
                    <el-input v-model="form.moduleName" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="资源类型">
                     <el-radio-group v-model="form.moduleType">
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="0">按钮</el-radio>
                      </el-radio-group>
                </el-form-item>

                <el-form-item label="排序号" >
                   <el-input v-model="form.sortNo" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="是否可用" >
                    <el-radio-group v-model="form.isValidate":disabled="true">
                      <el-radio :label="1">正常</el-radio>
                      <el-radio :label="0">被删除</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="资源对应URL" v-if='form.moduleType==0' >
                     <el-input v-model="form.linkUrl" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="菜单描述" >
                    <el-input v-model="form.moduleRemark" type="textarea" :rows="3" placeholder="请输入备注说明"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('cancel');">关 闭</el-button>
                <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
            </div>


             <SelectDialog
                     :title="selectDialogTitle"
                     :dialogFormVisible2="selectDialogVisible"
                     :data="selectMenuTree"
                     @val-change="selectParent"
                     @cancel="selectDialogVisible = false"
                 >
             </SelectDialog>

        </el-dialog>
    </div>
</template>

<script>
    import SelectDialog from './SelectDialog.vue'
    export default {
        name: 'addMenu',
        props: {
            dialogFormVisible:Boolean,
            //data: [Object,Boolean],
            title:String
        },

        data() {
              return {
                selectDialogVisible : false,
                selectDialogTitle : "选择菜单",

                btnLoading:false,
                selectMenuTree: [],
                props: {
                  value:'moduleId',
                  label: 'moduleName',
                  children: 'children'
                },
                form: {
                  moduleId:null,
                  moduleName:'',
                  parentId:'',
                  moduleRemark:'',
                  linkUrl:'',
                  sortNo:null,
                  moduleType: 0,
                  isValidate: 1,
                  parentDisplay: '',
                },
              }

        },
        watch: {
            'data': {
                handler: function () {
                    if(this.data){
                        for (let k in this.form){
                          this.form[k] = this.data[k];
                        }
                    }else {
                      for (let k in this.form){
                        this.form[k] = '';
                      }
                    }
                },
                deep: true
            }
        },
        methods: {
          handleChange(){},
          btnOk(){
              let errorMsg = false;
              let formData = this.form;

              if(formData.moduleName && formData.moduleName.length <=1) errorMsg = '菜单名称必须大于1个字符';

              if(errorMsg) {
                  this.$message.error(errorMsg);
                  return ;
              }

              this.$emit('val-change',this.form);
              this.btnLoading = true;
              setTimeout(()=>{this.btnLoading = false},1000)
          },
          openSelectDialog(){
              this.selectDialogVisible=true;
              var req={}
              req.moduleType=1;
              req.isValidate=1;
              this.$APIS.default.listMenuTree(req)
                   .then(res => {
                        this.selectMenuTree= res.data.body.menuTree
              });

          },
          selectParent(data){
              if(data.length!=1){
                 this.$message.error("error:能且只能选择一个菜单作为父级");
              }
              this.selectDialogVisible=false
              this.form.parentId=data[0].moduleId;
              this.form.parentDisplay=data[0].moduleId+'-'+data[0].moduleName;
          }
        },
        components: {
           SelectDialog
        }
    }
</script>
<style lang="less">
    .category-dialog{
        .el-cascader{
            width: 100%;
        }
    }
</style>
